<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from '@/router';
import type { Coupon } from '@/types/coupon';
// @ts-ignore
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
// @ts-ignore
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { getCouponList } from '@/api/user';
import CouponBtn from './components/coupon-btn.vue';
import CouponMeta from './components/coupon-meta.vue';
import CouponIcon from './components/coupon-icon.vue';
import { useAuthStore } from '@/store/auth';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';
import { rpx2px } from '@/utils/px';

const authStore = useAuthStore();
const { t } = useLocale();
const router = useRouter();
const statusBarH = ref(0);
const stat = ref(0);
const list = ref<Coupon[]>([]);
const upOption = reactive({
  // 首次自动执行
  auto: false,
  // 数量要大于3条才显示无更多数据
  noMoreSize: 3,
  offset: 10,
  textLoading: '',
  empty: {
    use: false
  }
});
const downOption = reactive({
  textInOffset: '',
  textOutOffset: '',
  textLoading: '',
  textSuccess: ''
});
const { mescrollInit, downCallback } = useMescroll();

const upCallback = async (mescroll: any) => {
  const payload: any = {
    page: mescroll.num,
    pageSize: mescroll.size,
    state: stat.value
  };

  const res = await getCouponList(payload);
  let newList = res.data.list;
  if (!res.data.list) {
    newList = [];
  }
  mescroll.endBySize(newList.length, res.data.count);
  if (mescroll.num == 1) {
    list.value = [];
  }
  list.value = list.value.concat(newList);
};

function changeTabs(id: any) {
  stat.value = id;
  downCallback();
}

function navigateToDetails(item: any) {
  uni.navigateTo({
    url: '/pages/coupons/details?id=' + item.id
  });
}

function navigateToLogin() {
  if (!authStore.isLoggedIn) {
    uni.navigateTo({
      url: '/pages/auth/login'
    });
  }
}

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('LRKey_coupon')"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  />
  <view class="apt-tabs">
    <view :class="stat == 0 ? 'active' : ''" class="apt-tabs-item" @click="changeTabs(0)">
      {{ t('LSKey_scoreAll') }}
      <view></view>
    </view>
    <view :class="stat == 1 ? 'active' : ''" class="apt-tabs-item" @click="changeTabs(1)">
      {{ t('LAKey_couponUnused') }}
      <view></view>
    </view>
    <view :class="stat == 2 ? 'active' : ''" class="apt-tabs-item" @click="changeTabs(2)">
      {{ t('LAKey_couponUsed') }}
      <view></view>
    </view>
    <view :class="stat == 3 ? 'active' : ''" class="apt-tabs-item" @click="changeTabs(3)">
      {{ t('LAKey_couponExpired') }}
      <view></view>
    </view>
  </view>
  <view
    class="relative"
    :style="{
      height: 'calc(100vh - 44px - 116rpx - ' + statusBarH + 'px)',
      marginTop: isWechat() ? `${rpx2px(116)}px` : '0'
    }"
  >
    <view
      style="
        padding: 10rpx 0;
        background: #f4f4f4;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      "
    >
      <mescroll-uni
        ref="mescrollRef"
        :down="downOption"
        :fixed="false"
        :up="upOption"
        @down="downCallback"
        @init="mescrollInit"
        @up="upCallback"
      >
        <view
          v-for="item in list"
          v-if="list.length > 0"
          :key="item.id"
          :style="{
            padding: '10rpx 24rpx',
            backgroundColor: '#f4f4f4'
          }"
        >
          <view
            :class="{ 'is-disabled': item.state !== 1 }"
            class="coupon-card"
            @click="navigateToDetails(item)"
          >
            <coupon-icon :disabled="item.state !== 1" :scene="item.scene"></coupon-icon>
            <view class="flex-1">
              <coupon-meta
                :at-least="item.atLeast"
                :disabled="item.state !== 1"
                :end-date="item.endTime"
                :start-date="item.startTime"
                :title="item.couponName"
              ></coupon-meta>
            </view>
            <view class="flex items-center">
              <coupon-btn :disabled="item.state !== 1" :status="item.state"></coupon-btn>
            </view>
          </view>
        </view>
        <view v-else :style="{ height: 'calc(100vh - 44px - 116rpx - ' + statusBarH + 'px)' }">
          <view class="coupon-contain-empty">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/icon_coupon_empty.png"
            />
            <view v-if="authStore.isLoggedIn">{{ t('LAKey_couponNoData') }}</view>
            <view v-else-if="!authStore.isLoggedIn" style="color: #269c74" @click="navigateToLogin">
              {{ t('SignIn') }}
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<style lang="scss">
.apt-tabs {
  background: #fff;
  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(100, 100, 111, 0.08);
  display: flex;
  height: 96rpx;
  justify-content: space-between;
  left: 0;
  padding: 28rpx 60rpx 0;
  position: fixed;
  right: 0;
  z-index: 9999;

  &-item {
    color: #707070;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;

    view {
      background: #ffffff;
      height: 4rpx;
      margin-top: 8rpx;
    }

    &.active {
      color: #3d3d3d;
      font-weight: 500;

      view {
        background: #269c74;
      }
    }
  }
}

.coupon-card {
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  padding: 32rpx;
  position: relative;
  width: 702rpx;
}

.coupon-contain-empty {
  height: 556rpx;
  margin: 30rpx auto 0;
  position: relative;
  width: 556rpx;

  image {
    display: block;
    height: 100%;
    width: 100%;
  }

  view {
    bottom: 82rpx;
    color: #afafaf;
    font-size: 28rpx;
    font-weight: 400;
    left: 0;
    line-height: 44rpx;
    position: absolute;
    right: 0;
    text-align: center;
  }
}
</style>
